<template>
  <div class="content">
    <div class="content-bor">
      <div class="input-box">
        <el-input v-model="filterTableText" :style="`width: ${inputWidth}px`" size="mini" placeholder="请输入"/>
      </div>
      <div class="content-bor">
        <div class="content-tree">
          <el-tree
            ref="tableTree"
            default-expand-all
            node-key="idl"
            :data="treeData"
            :props="treeProps"
            :filter-node-method="filterNode"
          >
            <span
              slot-scope="{ node, data }"
              class="custom-tree-node"
              style="user-select: none"
              @click="getResouce($event, data, 'data')"
              @mousedown="nodeDownHandler($event, data, 'data', false)"
            >
              <!-- <i v-if="data.type === 'area'" class="iconfont tj-Grouping"/>
              <i v-if="data.type === 'org' || data.type === 'orgRoot'" class="iconfont tj-leimupinleifenleileibie2"/>
              <i v-if="data.type === 'source'" class="iconfont tj-shujuku"/>
              <i v-if="data.type === 'table'" class="iconfont tj-biaoge1"/>
              <i v-if="data.type === 'file'" class="el-icon-document"/>
              <i v-if="data.type === 'theme' || data.type === 'orgFold'" class="iconfont tj-wenjianjiafolders4"/>
              <i v-if="data.type === 'temp'" class="el-icon-loading"/> -->
              <IconFont v-if="data.type === 'source'" type="icon-shujuyuan"/>
              <IconFont v-if="data.type === 'theme'" type="icon-odbc-full"/>
              <IconFont v-if="data.type === 'table'" type="icon-shujubiao-"/>
              <span>{{ node.label }}</span>
            </span>
          </el-tree>
        </div>
      </div>
      <!--      <div class="tip">-->
      <!--        <img src="static/img/draw.png" alt="">-->
      <!--        <p>点击数据表或输入自动填充建表语句</p>-->
      <!--      </div>-->
    </div>
  </div>
</template>

<script>
import { queryDatasource, getSchemasAndTableData } from '@/api/dataSourceManage/index'
import { generateFlinkSql } from '@/api/workDevelopment/index'
import IconFont from '@/components/IconFont/index.vue'
export default {
  name: 'DataSource',
  components: { IconFont },
  props: {
    source: { type: String, default: '' }
  },
  data() {
    // if (this.mainPm) this.viewPM = new TaskTreePM(this.mainPm)
    // else this.viewPM = new TaskTreePM()
    return {
      filterTableText: '',
      treeData: [
        {
          label: '全部',
          description: '全部',
          id: 'quanbu',
          idl: 'quanbu',
          type: 'root',
          flag: 0,
          children: [
          ]
        }
      ],
      treeProps: {
        label: 'label',
        children: 'children',
        isLeaf: 'leaf'
      },
      inputWidth: 120
    }
  },
  watch: {
    filterTableText(val) {
      this.$refs.tableTree.filter(val)
    }
  },
  mounted() {
    const inputDom = document.querySelector('.content')
    this.inputWidth = inputDom && inputDom.offsetWidth ? inputDom.offsetWidth : 120
    this.initTreeData()
  },
  methods: {
    // 获取数据源树形结构数据
    async initTreeData() {
      let levelListRes = await queryDatasource({
        page: 1,
        pageSize: 99999
      })
      if (levelListRes && levelListRes.total > 99999) {
        const total = levelListRes.total
        levelListRes = await queryDatasource({
          page: 1,
          pageSize: total
        })
      }
      const { list } = levelListRes
      this.treeData[0].children = list.map((item, index) => {
        return {
          label: item.name,
          description: item.name,
          tooltip: item.name,
          id: item.id,
          flag: index + 1,
          children: [],
          type: item.type === 'kafka' ? 'kafka' : 'source',
          idl: item.id
        }
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    async nodeDownHandler(event, data, type, move = true) {
    // 鼠标按下获取数据源表
      console.log('nodeDownHandler:', data, type)
      if (data.type === 'source') {
        const { id } = data
        const themeRes = await getSchemasAndTableData({ id })
        console.log('themeRes=', themeRes)
        data.children = themeRes.map((item, index) => {
          return {
            description: item.name,
            label: item.name,
            type: 'theme',
            children: item.tables.map((it) => {
              return {
                description: it.name,
                label: it.name,
                schemaName: item.name,
                sourceId: id,
                type: 'table'
              }
            })
          }
        })
      }
      if (data.type === 'kafka') {
        console.log(data)
        const res = await generateFlinkSql({
          id: data.id,
          schemaName: '',
          tableName: ''
        })
        this.$emit('getCode', res)
      }
      if (!data || data.type === 'group') {
        return
      }
      if (
        type === 'data' &&
      data.type !== 'table' &&
      data.type !== 'file' &&
      data.type !== 'kafka' &&
      data.type !== 'CDC' &&
      data.type !== 'json' &&
      data.type !== 'TableOut'
      ) {
        return
      }
    },
    // 点击表，注入语句
    async getResouce(event, data, type) {
      if (data.children) {
        return
      }
      const res = await generateFlinkSql({
        id: data.sourceId,
        schemaName: data.label,
        tableName: data.schemaName
      })
      this.$emit('getCode', res)
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  display: flex;
  min-height: 100%;
  background: #fff;
  .content-bor {
    background: #fff;
    .input-box {
      .input-custom{
        width: 120px;
      }
    }
  }
}
.tip {
  width: calc(100% - 200px);
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  img {
    width: 120px;
  }
  p {
    font-size: 16px;
    margin-top: 20px;
    font-weight: 600;
    letter-spacing: 1px;
  }
}
</style>
